<script setup lang="ts">
import type { Node } from '@/types/schema'
import Renderer from './Renderer.vue'

const props = defineProps<{ node: Node }>()
const emit = defineEmits<{ (e: 'select', id: string): void }>()

const children = props.node.children || []
const mid = Math.ceil(children.length / 2)
const leftChildren = children.slice(0, mid)
const rightChildren = children.slice(mid)
</script>

<template>
  <div class="tm-grid">
    <div class="tm-grid-col">
      <Renderer
        v-for="child in leftChildren"
        :key="child.id"
        :node="child"
        @select="$emit('select', child.id)"
      />
    </div>
    <div class="tm-grid-col">
      <Renderer
        v-for="child in rightChildren"
        :key="child.id"
        :node="child"
        @select="$emit('select', child.id)"
      />
    </div>
  </div>
</template>

<style scoped>
.tm-grid {
  display: flex;
  gap: 16px;
  margin: 16px 0;
}
.tm-grid-col {
  flex: 1;
  min-width: 0;
}
</style>
